<template>
  <div class="dashboard-container" v-if="this.role == '用户'">
    <h1>购物车</h1>
    <div>
      <el-input placeholder="商品名称" v-model="commodityName" clearable style="width: 200px;margin-left: 40px"/>
      <el-select v-model="type" clearable placeholder="商品类型" style="width: 200px;margin-left: 40px">
        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-button type="primary" @click="selectAll" style="width: 100px;margin-left: 40px">查询</el-button>
      <el-button @click="checkUser" style="width: 100px;margin-left: 40px">重置</el-button>
      <el-table :data="shoppingCartList" height="750px" border style="width: 100%;margin-top: 20px">
        <el-table-column align="center" fixed prop="commodityName" label="商品名称" sortable/>
        <el-table-column align="center" fixed label="简介">
          <template v-slot="scope">
            <span style="max-width: 150px;text-overflow: ellipsis; overflow: hidden;white-space: nowrap; ">{{scope.row.synopsis}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed label="购买数量">
          <template v-slot="scope">
            <span > <span style="color: #0049ff">{{scope.row.number}}</span>  件</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed prop="maxNumber" label="库存数量" sortable/>
        <el-table-column align="center" fixed label="单价">
          <template v-slot="scope">
            <span >￥ <span style="color: #0049ff">{{scope.row.price}}</span> 元</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed prop="type" label="类型" sortable/>
        <el-table-column align="center" fixed prop="locality" label="产地" sortable/>
        <el-table-column align="center" fixed label="合计价格">
          <template v-slot="scope">
            <span >￥ <span style="color: #ff0000">{{scope.row.price * scope.row.number}}</span> 元</span>
          </template>
        </el-table-column>
        <el-table-column prop="imageMain" label="商品图片" sortable align="center" fixed header-align="center">
          <template v-slot="scope">
            <el-image fit="cover" v-if="scope.row.imageMain" style="width: 100%; height: 100px" :src="require ('C:/upload/' + scope.row.imageMain)"
                      :preview-src-list="[require ('C:/upload/' + scope.row.imageMain)]"/>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed width="220" label="操作">
          <template v-slot="scope" >
            <el-input-number v-model="scope.row.number" :min="1" :max="scope.row.number + scope.row.maxNumber"
                             show-word-limit
                             clearable
                             placeholder="请输入需要购买的数量" @change="updateShoppingCart(scope.row)"
            />
            <el-button type="text" @click="buyButton(scope.row)">购买</el-button>
            <span style="margin: 0 20px;"/>
            <el-button type="text" @click="deleteButton(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="删除" width="40%" :visible.sync="deleteButtonController">
        <h1>请确认是否删除？</h1>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="deleteShoppingCart">确定</el-button>
          <el-button @click="deleteButtonController = false">取消</el-button>
        </span>
      </el-dialog>

      <el-dialog title="购买" width="40%" :visible.sync="buyButtonController">
        <h2>请确认是否购买商品： <span style="color: #43e731">{{this.commodityName}}</span></h2>
        <h3>当前单价：￥ <span style="color: #0049ff">{{this.price}}</span> 元，
          购买数量为 <span style="color: #0049ff">{{this.number}}</span> 件</h3>
        <h3>合计价格为：￥ <span style="color: #ff0000">{{this.price * this.number}}</span> 元</h3>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="buyShoppingCart">确定</el-button>
          <el-button @click="buyButtonController = false">取消</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
  <div class="dashboard-container" v-else>
    <h1>无权限访问</h1>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { buyShoppingCart, deleteShoppingCart, queryAllShoppingCart, updateShoppingCart } from '@/api/shoppingCart'
export default {
  name: 'shoppingCart',
  computed: { ...mapGetters(['userId', 'name', 'role']) },
  // 存放页面参数
  data() {
    return {
      commodityId: '',
      commodityName: '',
      number:'',
      price:'',
      type: '',
      typeList: [
        { value: '服装', label: '服装' },
        { value: '电器', label: '电器' },
        { value: '日用品', label: '日用品' },
        { value: '食品', label: '食品' },
        { value: '玩具', label: '玩具' },
        { value: '珠宝礼品', label: '珠宝礼品' },
        { value: '数字产品', label: '数字产品' }
      ],
      shoppingCartList: [],
      deleteButtonController: false,
      buyButtonController:  false,
    }
  },
  // 页面初始化加载的方法
  mounted() {
    this.selectAll()
  },
  // 页面的方法和事件
  methods: {
    selectAll() {
      queryAllShoppingCart({
        userId: this.userId,
        commodityName: this.commodityName,
        type: this.type
      }).then(
        response => {
          this.shoppingCartList = response.data
        }
      )
    },
    checkUser() {
      this.commodityName = ''
      this.type = ''
      this.selectAll()
    },
    updateShoppingCart(row) {
      updateShoppingCart({
        commodityId: row.commodityId,
        userId: row.userId,
        number: row.number
        }).then(response => {
          this.selectAll()
        })
    },
    buyButton(row) {
      this.buyButtonController = true
      this.commodityId = row.commodityId
      this.commodityName = row.commodityName
      this.number = row.number
      this.price = row.price
    },
    buyShoppingCart(formName) {
      buyShoppingCart({
        userId: this.userId,
        commodityId: this.commodityId,
        commodityName: this.commodityName,
        price: this.price,
        number: this.number
      }).then(
        response => {
          this.buyButtonController = false
          this.commodityName = ''
          this.selectAll()
        }
      )
    },
    deleteButton(row) {
      this.deleteButtonController = true
      this.commodityId = row.commodityId
    },
    deleteShoppingCart(formName) {
      deleteShoppingCart({
        userId: this.userId,
        commodityId: this.commodityId
      }).then(
        response => {
          this.deleteButtonController = false
          this.commodityId = ''
          this.selectAll()
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
